<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <style>
      .menu-collapse-span::after {
        content: '>';
        display: inline-block;
        transform: rotate(90deg);
        margin-left: 6px;
        transition: all 0.3s ease-in-out;
      }
      .menu-collapse-span-close::after {
        transform: rotate(-90deg);
      }
      .menu-collapse-list {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.6s ease-in-out;
      }
    </style>
  </head>
  <body>
    <div class="flex h-screen">
      <div class="w-60 bg-yellow-100">
        <!-- <li class="menu">Badging API(已安装的web应用)</li> -->
        <ul>
          <li class="menu-collapse">
            <span
              class="cursor-pointer menu-collapse-span menu-collapse-span-close"
            >
              文字
            </span>
            <ol class="menu-collapse-list">
              <li class="menu ml-2">动态字体大小</li>
            </ol>
          </li>
          <li class="menu-collapse">
            <span
              class="cursor-pointer menu-collapse-span menu-collapse-span-close"
            >
              元素
            </span>
            <ol class="menu-collapse-list">
              <li class="menu ml-2">保持宽高比</li>
            </ol>
          </li>
        </ul>
      </div>
      <div class="flex-auto bg-orange-50">
        <div class="menu-top-container w-full h-full bg-orange-150"></div>
        <iframe
          id="iframe"
          class="w-full h-full"
          src="./src/BatteryStatusAPI.html"
          frameborder="0"
        ></iframe>
      </div>
    </div>
    <script>
      $('.menu').click(function () {
        const menuName = $(this).text().split(' ').join('');
        $('#iframe').attr('src', `./src/${menuName}.html`);
        $('.menu-top-container').hide();
        $('#iframe').show();
      });
      $('.menu-collapse-span').click(function () {
        $(this).toggleClass('menu-collapse-span-close');
        if ($(this).hasClass('menu-collapse-span-close')) {
          $(this).next().css({ maxHeight: 0 });
        } else {
          $(this).next().css({ maxHeight: 999 });
        }
      });
    </script>
  </body>
</html>
